<template>
  <div>
    <form class="form-inline">
      <div class="form-group">
        <label for="c_plan_year">年份：</label>
        <v-select id="c_plan_year" :value.sync="c_plan_year"
        :options='c_year_list' close-on-select clear-button></v-select>
        <label for="c_plan_month">月份：</label>
        <v-select id="c_plan_month" :value.sync="c_plan_month"
        :options='c_month_list' close-on-select clear-button></v-select>
        <button type="button" class="btn btn-default" @click="search()">查询</button>
      </div>
      <div class="form-group">
        人员:
        <chooser :userid.sync='f.id' resource-type="user" :width='200' :select-data.sync='model.chosenOrg'></chooser>
      </div>
    </form>
    <hr>
    <table class="table table-bordered">
        <thead>
          <tr>
            <th></th>
            <th>计划名称</th>
            <th>计划类型</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in model.rows">
            <td @click="select(row, $index)">{{row.selected ? '☆' : ''}}</td>
            <td @click="select(row, $index)">{{row.f_plan_name}}</td>
            <td @click="select(row, $index)">{{row.f_plan_type}}</td>
          </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import Vue from 'vue'

export default {
  title: '选择安检计划',
  props: ['f'],
  data() {
    let options = []
    let year = (new Date()).getFullYear()
    for(let i = year - 8; i <= year +1; i++ )
      options.push({label: i+'', value: i+''})
    let moptions = []
    for(let i=1; i<=12; i++)
      moptions.push({label: i + '', value: i + ''})
    let model = new PagedList('rs/sql/按年月人员提取安检计划', 20,
    {f_checker_id: 'this.chosenOrg.id', f_plan_year: 'this.f_plan_year', f_plan_month: 'this.f_plan_month'})
    model.chosenOrg = {id:0}
    return {
      c_plan_year: [year + ''],
      c_year_list: options,
      c_month_list: moptions,
      c_plan_month: [moptions[new Date().getMonth()].value],
      model: model,
      selectedRow: {}
    }
  },
  ready () {
    this.model.f_plan_year = this.c_plan_year[0]
    this.model.f_plan_month = this.c_plan_month[0]
    this.model.f_subcompany = Vue.f_subcompany
  },
  watch: {
    'c_plan_year' (val) {
      this.model.f_plan_year = val[0]
    },
    'c_plan_month' (val) {
      this.model.f_plan_month = val[0]
    }
  },
  methods: {
    search () {
      this.model.rows = []
      this.model.search()
    },
    select(row, idx) {
      if(this.selectedRow)
        this.$set('model.rows[' + this.selectedRow.idx + '].selected', false)
      this.selectedRow = row
      this.selectedRow.idx = idx
      this.$set('model.rows[' + idx + '].selected', true)
    }
  }
}
</script>
